<template>
  <div
    ref="wrapper"
    class="date-picker-wrapper"
    style="position: relative; display: inline-block"
  >
    <el-popover
      :visible="visible"
      placement="bottom-start"
      width="700"
    >
      <p>Are you OK?</p>
      <DataPicker />

      <template #reference>
        <div class="sty">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
            readonly
            style="width: 300px; margin: 20px"
          />
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import DataPicker from "./w25.vue";

const dateRange = ref<[string, string] | null>(null);
const wrapper = ref<HTMLElement | null>(null);
const visible = ref(false);

const onClickOutside = (event: MouseEvent) => {
  if (!wrapper.value) return;
  if (!wrapper.value.contains(event.target as Node)) {
    // showCustomPanel.value = false;
    visible.value = false;
  }
};

onMounted(() => {
  document.addEventListener("click", onClickOutside);

  document.querySelector(".el-input__wrapper").addEventListener("click", () => {
    visible.value = true;
  });
});

onBeforeUnmount(() => {
  document.removeEventListener("click", onClickOutside);
});
</script>

<style scoped lang="scss">
.sty {
  :deep(.el-date-editor--daterange) {
    margin: 0 !important;
  }
}
</style>
